<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/reset.css">
    <title>免费在线 BMI 计算器 Vue版</title>
</head>
<body>
    <!--上部-->
    <header>
        <nav>
            <div class="top-nav">
                <a href="javascript:void(0)">语言:</a>
                <a href="javascript:void(0)">English</a>
                <a href="javascript:void(0)">简体中文</a>
                <a href="javascript:void(0)">繁体中文</a>
            </div>
            <div class="box">
                <div class="logo "></div>
                <div class="text">
                    <h2>免费在线 BMI 计算器</h2>
                    <p> 身体质量指数 (Body Mass Index, 简称BMI), 亦称克托莱指数, 是目前国际上常用的衡量人体胖瘦程度以及是否健康的一个标准。BMI 值超标，意味着你必须减肥了。</p>
                </div>
            </div>

        </nav>
    </header>
    <div id="app">
        <!--banner-->
        <div class="wrap-box" id="wrap">
            <div class="banner" id="banner">
                <div class="arrow" id="arrow">广告</div>
            </div>
        </div>
        <!--中间内容-->
        <div class="content clearfix">
            <div class="form">
                <h3>免费计算你的身体质量指数 (BMI)</h3>
                <div id="BMI" class="bml" v-if="isState">
                    <div class="bml-i"> <i class="fa fa-arrow-right"> </i></div>
                    <div class="bmi-span">
                        <span id="bmi-span">
                            你的 BMI 值: {{ currentData.bmi }}，身体状态：{{ currentData.status }}
                        </span>
                    </div>
                </div>
                <div class="text1">
                    <span class="measure">度量单位</span>
                    <label>
                        <input type="radio" name="unit" >公制
                    </label>
                    <label>
                        <input type="radio" name="unit">英制
                    </label>
                </div>
                <div class="text1">
                    <label>
                        我的身高:<input  v-model.number.trim="form.height"
                               type="text" class="unit" id="data"  maxlength="3" value="">  单位: 厘米 cm
                    </label>
                </div>
                <div class="text1">
                    <label>
                        我的体重:<input v-model.number.trim="form.weight"
                               type="text" class="unit" id="data2" maxlength="3" value=" "> 单位: 千克 kg
                    </label>
                </div>
                <div class="norm">
                    <span>BMI 标准:</span>
                    <select name="" id="" class="unit">
                        <option value="中国标准">中国标准</option>
                        <option value="中国标准">中国标准</option>
                        <option value="日本标准">日本标准</option>
                        <option value="新加坡标准">新加坡标准</option>
                    </select></div>
                <div class="history">
                    <label >
                        <input type="checkbox" name="1">
                        <span>自动保存 BMI 历史记录</span>
                    </label>
                </div>
                <div class="wrap-button"><button id="calc" @click="calcAdd()">计算 BMI</button></div>
            </div>
            <!--右边表格数据-->
            <div class="table">
                <div class="table-title">BMI 中国标准</div>
                     <table>
                       <tr v-for="(item, index) of statusData">
                           <td :style="{opacity: currentData.status === item.key? 1 : 0}"><img src="img/arrow.png" class="table_arrow"/></td>
                           <td>{{item.key}}</td>
                           <td>{{item.value}}</td>
                       </tr>
                     </table>
            </div>
        </div>
        <!--底部-->
        <footer>
            <h4>我的 BMI 历史记录</h4>
            <div class="wrap-record">
                <div class="record">
                    <table>
                        <thead>
                        <tr>
                            <td>#</td>
                            <td>日期</td>
                            <td>身高</td>
                            <td>体重</td>
                            <td>BMI</td>
                            <td>操作</td>
                        </tr>
                        </thead>
                    </table>
                </div>
                <div class="empty" id="empty">
                    <p id="record" v-if="list.length === 0">当前没有任何 BMI 记录。请输入你的身高和体重，并选中“自动保存 BMI 历史记录”，记算你的 BMI 指数。</p>
                    <table v-else>
                                <tr v-for="(item, index) of list">
                                    <td>{{index + 1}}</td>
                                    <td>{{item.createdAt.slice(0,item.createdAt.indexOf('T'))}}</td>
                                    <td>{{item.height}}</td>
                                    <td>{{item.weight}}</td>
                                    <td>{{item.bmi}}</td>
                                    <td><a href="javascript:void(0)" @click="del(item.objectId)">删除</a></td>
                                </tr>
                        </table>
                </div>

            </div>
            <div class="hint">提示: 浏览器的 Cookie 和 JavaScript 必须启用. </div>
            <div class="copyright">
                版权所有 © 2010 - 2021 onlinebmicalculator.com. 保留所有权利
                <br>
                Email: Andrew [at] onlinebmicalculator.com</div>
        </footer>
    </div>
<script src="lib/layui-v2.6.8/layui.js"></script>
<script src="lib/vue.js"></script>
<script type="module">
import ajax from './lib/ajax.js'
let vm = new Vue({
        el:'#app',
        data:{
             isState: false,
             form: {
                height:'',
                weight:'',
             },
             currentData: {
                status: '',
                bmi: ''
            },
            statusData: [
                { key: '分类', value: 'BMI 范围', bg: 'lightblue' },
                { key: '偏瘦', value: '<= 18.4', bg: 'gray' },
                { key: '正常', value: '18.5 ~ 23.9', bg: 'green' },
                { key: '过重', value: '24.0 ~ 27.9', bg: 'yellow' },
                { key: '肥胖', value: '>= 28.0', bg: 'orange' },
            ],
            list:[]
        },
        //当页面加载的时候执行的声明周期函数
        created() {
           this.getList()
        },
        methods: {
            //获取
           getList() {
               ajax({
                   url: 'https://veihwwnelcwq.leanapp.cn/bmi'
               }).then(res => {
                   layer.msg('获取成功');
                   this.list = res.data
               })
           },
            //删除
            del(id) {
                layer.confirm('你是否要删除呢?', {icon: 3, title:'提示'}, (index) =>{
                    ajax({
                        url: 'https://veihwwnelcwq.leanapp.cn/bmi',
                        method: 'DELETE',
                        data: {
                            id: id
                        }
                    }).then(res => {
                           layer.msg('删除成功');
                            this.getList()
                        })
                });
            },
            //增加
            calcAdd(){
                ajax({
                    url: 'https://veihwwnelcwq.leanapp.cn/bmi',
                    method: 'POST',
                    data: this.form
                }).then(res => {
                    layer.msg('增加成功');
                    this.currentData = res.data
                    this.isState = true
                    this.getList()
                })

            }
        },

    })
</script>
<!--<script src="js/index.js"></script>-->
</body>
</html>